﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Inline EditForm 内嵌表单编辑器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    <style type="text/css">
        .New_Button, .Edit_Button, .Delete_Button, .Update_Button, .Cancel_Button
        {
            font-size:11px;color:#1B3F91;font-family:Verdana;  
            margin-right:5px;          
        }
       
                
    </style>   
      <style type="text/css">

        
        .actionIcons span
        {
            width:16px;
            height:16px;
            display:inline-block;
            background-position:50% 50%;
            cursor:pointer;
        }
                
    </style>      
</head>
<body>
    <h1>Inline EditForm 内嵌表单编辑器</h1> 
    
    <div style="padding-bottom:8px;">        
        <!--  <a class="mini-button" iconCls="icon-save" onclick="saveData">保存</a> -->       
        <a class="mini-button" iconCls="icon-add" onclick="newRow">新增子任务</a>
    </div>     

    <div id="datagrid1" class="mini-datagrid" style="width:900px;height:550px;" allowResize="true"
        url="../data/DataService.jsp?method=SearchEmployees"  idField="id" showFooter="false"
        onshowrowdetail="onShowRowDetail" 
    >
        <div property="columns">
        <!-- 
            <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
            --> 
            <div cellCls="actionIcons" name="action" width="40" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">删除</div>
            <div type="expandcolumn" >展开</div>
            <div field="loginname" width="520" cellStyle="color:Red;height:30px;"
             headerAlign="center" align="center" allowSort="true">子任务列表</div>  
            <!--             
            <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>            
            <div field="age" width="100" allowSort="true">年龄</div>
            <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期</div>                                    
            <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>    
            -->               
        </div>
    </div>    
    
<div id="editForm1" style="display:none;padding:5px;position:relative;">
    <input class="mini-hidden" name="id"/>
    <table style="width:100%;">
        <tr>
         <td style="display:none;">
            <input name="loginname" id="loginname" class="mini-textbox" value=""/>
         </td>
            <td style="width:80px;">员工帐号：</td>
            <td style="width:150px;"><input name="loginname1" id="loginname1" class="mini-textbox" value=""/></td>
            <td style="width:80px;">姓名：</td>
            <td style="width:150px;"><input name="name" class="mini-textbox" /></td>
            <td style="width:80px;">薪资：</td>
            <td style="width:150px;"><input name="salary" class="mini-textbox" /></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input name="gender" class="mini-combobox" data="Genders"/></td>
            <td>年龄：</td>
            <td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25"  /></td>
            <td>出生日期：</td>
            <td><input name="birthday" class="mini-datepicker" /></td>
        </tr>
        <!-- 
        <tr>
            <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
                <a class="Update_Button" href="javascript:updateRow();">Update</a> 
                <a class="Cancel_Button" href="javascript:cancelRow();">Cancel</a>
            </td>                
        </tr>
        -->
    </table>
</div>



<div id="editForm2" style="display:none;padding:5px;position:relative;">
    <input class="mini-hidden" name="id"/>
    <table style="width:100%;">
        <tr>
         <td style="display:none;">
            <input name="loginname" id="loginname" class="mini-textbox" value=""/>
         </td>
            <td style="width:80px;">员工帐号：</td>
            <td style="width:150px;"><input name="loginname1" id="loginname1" class="mini-textbox" value=""/></td>
            <td style="width:80px;">姓名：</td>
            <td style="width:150px;"><input name="name" class="mini-textbox" /></td>
            <td style="width:80px;">薪资：</td>
            <td style="width:150px;"><input name="salary" class="mini-textbox" /></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input name="gender" class="mini-combobox" data="Genders"/></td>
            <td>年龄：</td>
            <td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25"  /></td>
            <td>出生日期：</td>
            <td><input name="birthday" class="mini-datepicker" /></td>
        </tr>
        <!-- 
        <tr>
            <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
                <a class="Update_Button" href="javascript:updateRow();">Update</a> 
                <a class="Cancel_Button" href="javascript:cancelRow();">Cancel</a>
            </td>                
        </tr>
        -->
    </table>
</div>




    <script type="text/javascript">
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];

        mini.parse();

        var editForm = document.getElementById("editForm1");
        var editForm1 = document.getElementById("editForm2");

        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("createtime", "desc");

        ///////////////////////////////////////////////////////       

        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }



        function onActionRenderer(e) {
            var grid = e.sender;
            var record = e.record;
            var uid = record._uid;
            var rowIndex = e.rowIndex;

            var s = '<span class="icon-remove" title="删除记录" onclick="delRow(' + uid + ')"></span>';
            return s;
        }

        function newRow() {
            var hiddenBox = mini.get("loginname");

            var row = { loginname: "子任务信息" };
            hiddenBox.setValue("子任务信息");


            var grid = mini.get("datagrid1");
            var data = grid.getData();
            var length = data.length;


            grid.addRow(row, length);

            editRow(row._uid, length);
        }
        function editRow(row_uid, length) {            
            var row = grid.getRowByUID(row_uid);
            if (row) {
                grid.showRowDetail(row);
                grid.doLayout();
            }
        }
        function cancelRow() {
            grid.reload();
        }
        function delRow(row_uid) {
            var row = grid.getRowByUID(row_uid);
            if (row) {

                if (confirm("确定删除此记录？")) {
                    // alert();
                    if (row.id == null) {

                        grid.removeRow(row);
                        updateRow();
                        grid.reload();
                    }
                    else {
                        grid.loading("删除中，请稍后......");
                        $.ajax({
                            url: "../data/DataService.jsp?method=RemoveEmployees&id=" + row.id,
                            success: function (text) {
                                grid.reload();
                            },
                            error: function () {
                            }
                        });
                    }
                }
            }
        }

        function updateRow() {
            var form = new mini.Form("editForm1");

            var o = form.getData();


            grid.loading("保存中，请稍后......");
            var json = mini.encode([o]);
            $.ajax({
                url: "../data/DataService.jsp?method=SaveEmployees",
                data: { data: json },
                success: function (text) {
                    grid.reload();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                }
            });

        }


        function onShowRowDetail(e) {
            var row = e.record;

            //将editForm元素，加入行详细单元格内
            var td = grid.getRowDetailCellEl(row);
            
            var index = this.indexOf(row);
            if (index == 0) {
                td.appendChild(editForm);
                editForm.style.display = "";
            }
            else {
                td.appendChild(editForm1);
                editForm1.style.display = "";
            }

            //表单加载员工信息
            var form = new mini.Form("editForm1");
            if (grid.isNewRow(row)) {
                //form.reset();
            } else {
                grid.loading();
                $.ajax({
                    url: "../data/DataService.jsp?method=GetEmployee&id=" + row.id,
                    success: function (text) {
                        var o = mini.decode(text);
                        form.setData(o);

                        grid.unmask();
                    }
                });
            }
        }


    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>
</body>
</html>